High Contrast: fix metrics for popover menus

- ripped the appropriate bits from Adwaita.

https://bugzilla.gnome.org/show_bug.cgi?id=763609

diff --git a/gtk/theme/HighContrast/_colors.scss b/gtk/theme/HighContrast/_colors.scss
index d77e6d6a284e4932f5e4c6a2488fbcb77d6d038b..30716d1333f349d4b5295562071b75c29da2000c 100644 (file)
--- a/gtk/theme/HighContrast/_colors.scss
+++ b/gtk/theme/HighContrast/_colors.scss
@@ -9,6 +9,8 @@ $fg_color: if($variant == 'light', #000, #fff);
 $selected_fg_color: #fff;
 $selected_bg_color: if($variant == 'light', #000, #aaa); //#4a90d9;
 $selected_borders_color: if($variant == 'light', #000, #aaa);
+$popover_bg_color: $bg_color;
+$popover_hover_color: lighten($bg_color, 5%);
 
 $borders_color: mix($bg_color,$fg_color,50%);
 $borders_edge: if($variant == 'light', #fff, #000);

diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 219f94d4c16243ab926b0e75ba3bd29b8aed4f3a..ade3a59d58c8809c97f0ee9e24aab01634fe0e34 100644 (file)
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -142,6 +142,21 @@ label {
   }
 }
 
+%osd, .osd {
+  color: $osd_fg_color;
+  border: none;
+  background-color: $osd_bg_color;
+  background-clip: padding-box;
+  outline-color: transparentize($osd_fg_color, 0.7);
+  text-shadow: 0 1px black;
+  -gtk-icon-shadow: 0 1px black;
+
+  &:backdrop {
+    text-shadow: none;
+    -gtk-icon-shadow: none;
+  }
+}
+
 /*********************
  * Spinner Animation *
  *********************/
@@ -415,6 +430,43 @@ button {
     }
   }
 
+  //overlay / OSD style
+  @at-root %osd_button,
+  .osd & {
+    @include button(osd);
+
+    &:hover { @include button(osd-hover); }
+
+    &:active,
+    &:checked { &:backdrop, & { @include button(osd-active); }}
+
+    &:disabled { &:backdrop, & { @include button(osd-insensitive); }}
+
+    &:backdrop { @include button(osd-backdrop); }
+
+    &.flat {
+      @include button(undecorated);
+
+      box-shadow: none; //FIXME respect no edge on the button mixin
+      text-shadow: 0 1px black;
+      -gtk-icon-shadow: 0 1px black;
+
+      &:hover { @include button(osd-hover); }
+
+      &:disabled {
+        @include button(osd-insensitive);
+        background-image: none;
+        border-color: transparent;
+        box-shadow: none;
+      }
+
+      &:backdrop { @include button(undecorated); }
+
+      &:active,
+      &:checked { @include button(osd-active); }
+    }
+  }
+
   // buttons in header bars and action bars
   &.image-button { padding: 8px; }
   &.text-button { padding: 6px 8px 5px; } // due to font metrics
@@ -561,19 +613,53 @@ toolbar.inline-toolbar toolbutton { // .inline-toolbar.toolbar here for
 /* menu buttons */
 modelbutton.flat,
 .menuitem.button.flat {
+  min-height: 26px;
+  padding-left: 5px;
+  padding-right: 5px;
+  border-radius: 3px;
+  outline-offset: -2px;
+
   @extend %undecorated_button;
-  outline-offset: -1px;
-  &:hover, &:selected { @extend %selected_items; }
-  &:backdrop {
-    color: $backdrop_fg_color;
-    @extend %undecorated_button;
-    &:hover { color: $selected_fg_color; background-color: $selected_bg_color; }
-  }
-  &:disabled { color: $insensitive_fg_color; }
+
+  &:hover { background-color: $popover_hover_color; }
+
+  &:selected { @extend %selected_items; }
+
+  &:backdrop,
+  &:backdrop:hover { @extend %undecorated_button; }
+
+  // FIXME: remove the following when the checks/radios rewrite lands
+  check:last-child,
+  radio:last-child { margin-left: 8px; }
+
+  check:first-child,
+  radio:first-child { margin-right: 8px; }
+}
+
+modelbutton.flat arrow {
+  background: none;
+
+  &:hover { background: none; }
+
+  &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
+
+  &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
 }
 
-button.color { padding: 4px; } // Uniform padding on the
-                                        // GtkColorButton.button
+button.color {
+  padding: 4px;
+
+  colorswatch:only-child {
+    &, overlay { border-radius: 0; }
+
+    @if $variant == 'light' {
+      box-shadow: 0 1px _text_shadow_color();
+
+      &:disabled,
+      &:backdrop { box-shadow: none; }
+    }
+  }
+}
 
 /*********
  * Links *
@@ -1191,52 +1277,46 @@ menuitem {
  * Popovers   *
  ***************/
 
-popover {
-  margin: 10px;
+popover.background {
   padding: 2px;
-  border-color: $borders-color;
-  border-width: 1px;
-  border-style: solid;
   border-radius: 5px;
-  //background-clip: border-box;
-  background-color: $bg_color;
+  background-color: $popover_bg_color;
+
+  &, .csd & { border: 1px solid $borders_color; }
+
+  box-shadow: 0 1px 2px transparentize(black, 0.7);
 
-  box-shadow: 0 2px 3px transparentize(black, 0.5);
   &:backdrop {
+    background-color: $backdrop_bg_color;
     box-shadow: none;
   }
-  & > .list,
-  & > .view,
-  & > toolbar {
-    background-color: transparent;
-  }
-  separator {
-    color: $fg_color;
+
+  > list,
+  > .view,
+  > toolbar {
+    border-style: none;
     background-color: transparent;
-    border: 0;
   }
-  button.flat,
-  button.flat:hover {
-    color: $fg_color;
-    text-shadow: none;
-    transition: none;
-  }
-  &.magnifier,
-  &.osd { // Also used for touch cutnpaste overlays
-          // FIXME Doesn't work
-    background-image: none;
-    background-color: $osd_bg_color;
-    border: 1px solid $borders_color;
-    color: $osd_fg_color;
-    button {
-      color: white;
-      text-shadow: none;
-      @include button(osd);
-      &:hover { @include button(osd-hover); };
-      &:active { @include button(osd-active); };
-      &:disabled { @include button(osd-insensitive); };
+
+  &, .csd & {
+    &.touch-selection,
+    &.magnifier {
+      @extend %osd;
+
+      border: 1px solid transparentize(white, 0.9);
+
+      button { @extend %osd_button };
     }
+
+    &.osd { @extend %osd; }
   }
+
+  separator { margin: 3px; }
+
+  list separator { margin: 0px; }
+
+  checkbutton,
+  radiobutton { @extend modelbutton.flat; }
 }
 
 /*****************

diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css b/gtk/theme/HighContrast/gtk-contained-inverse.css
index 6693a488d2b1b978d67b29f4e0a698bf2dded81c..8de8d38b35e4c1c8c9fb3c6162d494427be9ae34 100644 (file)
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -108,6 +108,18 @@ flowbox flowboxchild {
 label:disabled, label:backdrop:disabled {
   color: gray; }
 
+popover.background.touch-selection, popover.background.magnifier, .csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.osd, .csd popover.background.osd, .osd {
+  color: #fff;
+  border: none;
+  background-color: rgba(0, 0, 0, 0.8);
+  background-clip: padding-box;
+  outline-color: rgba(255, 255, 255, 0.3);
+  text-shadow: 0 1px black;
+  -gtk-icon-shadow: 0 1px black; }
+  popover.background.touch-selection:backdrop, popover.background.magnifier:backdrop, popover.background.osd:backdrop, .osd:backdrop {
+    text-shadow: none;
+    -gtk-icon-shadow: none; }
+
 /*********************
  * Spinner Animation *
  *********************/
@@ -536,6 +548,67 @@ button {
       background-image: none;
       text-shadow: none;
       -gtk-icon-shadow: none; }
+  popover.background.touch-selection button, popover.background.magnifier button, .csd popover.background.touch-selection button, .csd popover.background.magnifier button, .osd button {
+    border-width: 2px;
+    border-style: solid;
+    color: #fff;
+    background-image: none;
+    background-color: rgba(0, 0, 0, 0.8);
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: none; }
+    popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd button:hover {
+      border-width: 2px;
+      border-style: solid;
+      color: #fff;
+      background-color: rgba(77, 77, 77, 0.8);
+      border-color: rgba(255, 255, 255, 0.2);
+      box-shadow: none; }
+    popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, popover.background.touch-selection button:active, popover.background.magnifier button:active, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked {
+      border-width: 2px;
+      border-style: solid;
+      color: rgba(0, 0, 0, 0.8);
+      background-color: #fff;
+      border-color: rgba(255, 255, 255, 0.2);
+      box-shadow: none; }
+    popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, .osd button:disabled:backdrop, .osd button:disabled {
+      border-width: 2px;
+      border-style: solid;
+      border-color: rgba(255, 255, 255, 0.2);
+      color: gray; }
+    popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop, .osd button:backdrop {
+      border-width: 2px;
+      border-style: solid; }
+    popover.background.touch-selection button.flat, popover.background.touch-selection button.sidebar-button, popover.background.magnifier button.flat, popover.background.magnifier button.sidebar-button, .osd button.flat, .osd button.sidebar-button {
+      border-width: 2px;
+      border-style: solid;
+      box-shadow: none;
+      text-shadow: 0 1px black;
+      -gtk-icon-shadow: 0 1px black; }
+      popover.background.touch-selection button.flat:hover, popover.background.touch-selection button.sidebar-button:hover, popover.background.magnifier button.flat:hover, popover.background.magnifier button.sidebar-button:hover, .osd button.flat:hover, .osd button.sidebar-button:hover {
+        border-width: 2px;
+        border-style: solid;
+        color: #fff;
+        background-color: rgba(77, 77, 77, 0.8);
+        border-color: rgba(255, 255, 255, 0.2);
+        box-shadow: none; }
+      popover.background.touch-selection button.flat:disabled, popover.background.touch-selection button.sidebar-button:disabled, popover.background.magnifier button.flat:disabled, popover.background.magnifier button.sidebar-button:disabled, .osd button.flat:disabled, .osd button.sidebar-button:disabled {
+        border-width: 2px;
+        border-style: solid;
+        border-color: rgba(255, 255, 255, 0.2);
+        color: gray;
+        background-image: none;
+        border-color: transparent;
+        box-shadow: none; }
+      popover.background.touch-selection button.flat:backdrop, popover.background.touch-selection button.sidebar-button:backdrop, popover.background.magnifier button.flat:backdrop, popover.background.magnifier button.sidebar-button:backdrop, .osd button.flat:backdrop, .osd button.sidebar-button:backdrop {
+        border-width: 2px;
+        border-style: solid; }
+      popover.background.touch-selection button.flat:active, popover.background.touch-selection button.sidebar-button:active, popover.background.magnifier button.flat:active, popover.background.magnifier button.sidebar-button:active, popover.background.touch-selection button.flat:checked, popover.background.touch-selection button.sidebar-button:checked, popover.background.magnifier button.flat:checked, popover.background.magnifier button.sidebar-button:checked, .osd button.flat:active, .osd button.sidebar-button:active, .osd button.flat:checked, .osd button.sidebar-button:checked {
+        border-width: 2px;
+        border-style: solid;
+        color: rgba(0, 0, 0, 0.8);
+        background-color: #fff;
+        border-color: rgba(255, 255, 255, 0.2);
+        box-shadow: none; }
   button.image-button {
     padding: 8px; }
   button.text-button {
@@ -672,9 +745,13 @@ stacksidebar row.needs-attention > label {
   border-radius: 3px;
   border-style: solid; }
 
-button.flat, button.sidebar-button, button.flat:backdrop, button.sidebar-button:backdrop, button.flat:disabled:backdrop, button.sidebar-button:disabled:backdrop, modelbutton.flat,
-.menuitem.button.flat, modelbutton.flat:backdrop,
-.menuitem.button.flat:backdrop, button:link, button:visited, button:link:hover, button:link:active, button:visited:hover, button:visited:active, button:link:backdrop, button:visited:backdrop, notebook tab button, row.activatable,
+button.flat, button.sidebar-button, button.flat:backdrop, button.sidebar-button:backdrop, button.flat:disabled:backdrop, button.sidebar-button:disabled:backdrop, modelbutton.flat, popover.background checkbutton,
+popover.background radiobutton,
+.menuitem.button.flat, modelbutton.flat:backdrop, popover.background checkbutton:backdrop,
+popover.background radiobutton:backdrop, modelbutton.flat:backdrop:hover, popover.background checkbutton:backdrop:hover,
+popover.background radiobutton:backdrop:hover,
+.menuitem.button.flat:backdrop,
+.menuitem.button.flat:backdrop:hover, button:link, button:visited, button:link:hover, button:link:active, button:visited:hover, button:visited:active, button:link:backdrop, button:visited:backdrop, notebook tab button, row.activatable,
 row.activatable:backdrop,
 row.activatable:backdrop:active,
 row.activatable:backdrop:checked,
@@ -690,22 +767,52 @@ row.activatable:disabled:checked, calendar.button, calendar.button:hover, calend
   -gtk-icon-shadow: none; }
 
 /* menu buttons */
-modelbutton.flat,
+modelbutton.flat, popover.background checkbutton,
+popover.background radiobutton,
 .menuitem.button.flat {
-  outline-offset: -1px; }
-  modelbutton.flat:backdrop,
-  .menuitem.button.flat:backdrop {
-    color: #fff; }
-    modelbutton.flat:backdrop:hover,
-    .menuitem.button.flat:backdrop:hover {
-      color: #fff;
-      background-color: #aaa; }
-  modelbutton.flat:disabled,
-  .menuitem.button.flat:disabled {
-    color: gray; }
+  min-height: 26px;
+  padding-left: 5px;
+  padding-right: 5px;
+  border-radius: 3px;
+  outline-offset: -2px; }
+  modelbutton.flat:hover, popover.background checkbutton:hover,
+  popover.background radiobutton:hover,
+  .menuitem.button.flat:hover {
+    background-color: #0d0d0d; }
+  modelbutton.flat check:last-child, popover.background checkbutton check:last-child,
+  popover.background radiobutton check:last-child,
+  modelbutton.flat radio:last-child,
+  popover.background checkbutton radio:last-child,
+  popover.background radiobutton radio:last-child,
+  .menuitem.button.flat check:last-child,
+  .menuitem.button.flat radio:last-child {
+    margin-left: 8px; }
+  modelbutton.flat check:first-child, popover.background checkbutton check:first-child,
+  popover.background radiobutton check:first-child,
+  modelbutton.flat radio:first-child,
+  popover.background checkbutton radio:first-child,
+  popover.background radiobutton radio:first-child,
+  .menuitem.button.flat check:first-child,
+  .menuitem.button.flat radio:first-child {
+    margin-right: 8px; }
+
+modelbutton.flat arrow, popover.background checkbutton arrow,
+popover.background radiobutton arrow {
+  background: none; }
+  modelbutton.flat arrow:hover, popover.background checkbutton arrow:hover,
+  popover.background radiobutton arrow:hover {
+    background: none; }
+  modelbutton.flat arrow.left, popover.background checkbutton arrow.left,
+  popover.background radiobutton arrow.left {
+    -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
+  modelbutton.flat arrow.right, popover.background checkbutton arrow.right,
+  popover.background radiobutton arrow.right {
+    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
 
 button.color {
   padding: 4px; }
+  button.color colorswatch:only-child, button.color colorswatch:only-child overlay {
+    border-radius: 0; }
 
 /*********
  * Links *
@@ -1323,71 +1430,46 @@ menuitem check, menuitem radio {
 /***************
  * Popovers   *
  ***************/
-popover {
-  margin: 10px;
+popover.background {
   padding: 2px;
-  border-color: gray;
-  border-width: 1px;
-  border-style: solid;
   border-radius: 5px;
   background-color: #000;
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); }
-  popover:backdrop {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
+  popover.background, .csd popover.background {
+    border: 1px solid gray; }
+  popover.background:backdrop {
+    background-color: #000;
     box-shadow: none; }
-  popover > .list, popover > .view, textview popover > text, popover > iconview, popover > toolbar, popover > searchbar {
+  popover.background > list,
+  popover.background > .view,
+  textview popover.background > text,
+  popover.background > iconview,
+  popover.background > toolbar,
+  popover.background > searchbar {
+    border-style: none;
     background-color: transparent; }
-  popover separator, popover placessidebar .view separator, placessidebar .view popover separator, popover placessidebar textview text separator, placessidebar textview text popover separator, popover textview placessidebar text separator, textview placessidebar text popover separator, popover placessidebar iconview separator, placessidebar iconview popover separator,
-  popover placessidebar .view separator:backdrop,
-  placessidebar .view popover separator:backdrop,
-  popover placessidebar textview text separator:backdrop,
-  placessidebar textview text popover separator:backdrop,
-  popover textview placessidebar text separator:backdrop,
-  textview placessidebar text popover separator:backdrop,
-  popover placessidebar iconview separator:backdrop,
-  placessidebar iconview popover separator:backdrop {
-    color: #fff;
-    background-color: transparent;
-    border: 0; }
-  popover button.flat, popover button.sidebar-button,
-  popover button.flat:hover,
-  popover button.sidebar-button:hover {
-    color: #fff;
-    text-shadow: none;
-    transition: none; }
-  popover.magnifier, popover.osd {
-    background-image: none;
-    background-color: rgba(0, 0, 0, 0.8);
-    border: 1px solid gray;
-    color: #fff; }
-    popover.magnifier button, popover.osd button {
-      color: white;
-      text-shadow: none;
-      border-width: 2px;
-      border-style: solid;
-      color: #fff;
-      background-image: none;
-      background-color: rgba(0, 0, 0, 0.8);
-      border-color: rgba(255, 255, 255, 0.2);
-      box-shadow: none; }
-      popover.magnifier button:hover, popover.osd button:hover {
-        border-width: 2px;
-        border-style: solid;
-        color: #fff;
-        background-color: rgba(77, 77, 77, 0.8);
-        border-color: rgba(255, 255, 255, 0.2);
-        box-shadow: none; }
-      popover.magnifier button:active, popover.osd button:active {
-        border-width: 2px;
-        border-style: solid;
-        color: rgba(0, 0, 0, 0.8);
-        background-color: #fff;
-        border-color: rgba(255, 255, 255, 0.2);
-        box-shadow: none; }
-      popover.magnifier button:disabled, popover.osd button:disabled {
-        border-width: 2px;
-        border-style: solid;
-        border-color: rgba(255, 255, 255, 0.2);
-        color: gray; }
+  popover.background.touch-selection, popover.background.magnifier, .csd popover.background.touch-selection, .csd popover.background.magnifier {
+    border: 1px solid rgba(255, 255, 255, 0.1); }
+  popover.background separator,
+  popover.background placessidebar .view separator:backdrop,
+  placessidebar .view popover.background separator:backdrop,
+  popover.background placessidebar textview text separator:backdrop,
+  placessidebar textview text popover.background separator:backdrop,
+  popover.background textview placessidebar text separator:backdrop,
+  textview placessidebar text popover.background separator:backdrop,
+  popover.background placessidebar iconview separator:backdrop,
+  placessidebar iconview popover.background separator:backdrop {
+    margin: 3px; }
+  popover.background list separator,
+  popover.background list placessidebar .view separator:backdrop,
+  placessidebar .view popover.background list separator:backdrop,
+  popover.background list placessidebar textview text separator:backdrop,
+  placessidebar textview text popover.background list separator:backdrop,
+  popover.background list textview placessidebar text separator:backdrop,
+  textview placessidebar text popover.background list separator:backdrop,
+  popover.background list placessidebar iconview separator:backdrop,
+  placessidebar iconview popover.background list separator:backdrop {
+    margin: 0px; }
 
 /*****************
  * Notebooks and *
@@ -2255,8 +2337,8 @@ textview text selection:hover, flowbox flowboxchild:selected, label selection, l
 entry selection:focus, spinbutton selection
 entry selection:focus, entry selection
 spinbutton selection:focus, spinbutton selection
-spinbutton selection:focus, modelbutton.flat:hover, modelbutton.flat:selected,
-.menuitem.button.flat:hover,
+spinbutton selection:focus, modelbutton.flat:selected, popover.background checkbutton:selected,
+popover.background radiobutton:selected,
 .menuitem.button.flat:selected, treeview.view:selected, row.activatable:selected, .sidebar:selected, placessidebar .view:selected, placessidebar textview text:selected, textview placessidebar text:selected, placessidebar iconview:selected, placessidebar calendar:selected {
   background-color: #aaa;
   color: #fff;
@@ -2265,8 +2347,8 @@ spinbutton selection:focus, modelbutton.flat:hover, modelbutton.flat:selected,
   entry selection:backdrop:focus, spinbutton selection
   entry selection:backdrop:focus, entry selection
   spinbutton selection:backdrop:focus, spinbutton selection
-  spinbutton selection:backdrop:focus, modelbutton.flat:backdrop:hover, modelbutton.flat:backdrop:selected,
-  .menuitem.button.flat:backdrop:hover,
+  spinbutton selection:backdrop:focus, modelbutton.flat:backdrop:selected, popover.background checkbutton:backdrop:selected,
+  popover.background radiobutton:backdrop:selected,
   .menuitem.button.flat:backdrop:selected, row.activatable:backdrop:selected, .sidebar:backdrop:selected {
     background-color: gray;
     color: #fff; }

diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
index 50af9251a95f007cdc306874cd63a9a9a88f2a73..0174b669a3d69dae8e75f0f46f6ad76d9786c641 100644 (file)
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -108,6 +108,18 @@ flowbox flowboxchild {
 label:disabled, label:backdrop:disabled {
   color: gray; }
 
+popover.background.touch-selection, popover.background.magnifier, .csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.osd, .csd popover.background.osd, .osd {
+  color: #fff;
+  border: none;
+  background-color: rgba(0, 0, 0, 0.8);
+  background-clip: padding-box;
+  outline-color: rgba(255, 255, 255, 0.3);
+  text-shadow: 0 1px black;
+  -gtk-icon-shadow: 0 1px black; }
+  popover.background.touch-selection:backdrop, popover.background.magnifier:backdrop, popover.background.osd:backdrop, .osd:backdrop {
+    text-shadow: none;
+    -gtk-icon-shadow: none; }
+
 /*********************
  * Spinner Animation *
  *********************/
@@ -536,6 +548,67 @@ button {
       background-image: none;
       text-shadow: none;
       -gtk-icon-shadow: none; }
+  popover.background.touch-selection button, popover.background.magnifier button, .csd popover.background.touch-selection button, .csd popover.background.magnifier button, .osd button {
+    border-width: 2px;
+    border-style: solid;
+    color: #fff;
+    background-image: none;
+    background-color: rgba(0, 0, 0, 0.8);
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: none; }
+    popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd button:hover {
+      border-width: 2px;
+      border-style: solid;
+      color: #fff;
+      background-color: rgba(77, 77, 77, 0.8);
+      border-color: rgba(255, 255, 255, 0.2);
+      box-shadow: none; }
+    popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, popover.background.touch-selection button:active, popover.background.magnifier button:active, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked {
+      border-width: 2px;
+      border-style: solid;
+      color: rgba(0, 0, 0, 0.8);
+      background-color: #fff;
+      border-color: rgba(255, 255, 255, 0.2);
+      box-shadow: none; }
+    popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, .osd button:disabled:backdrop, .osd button:disabled {
+      border-width: 2px;
+      border-style: solid;
+      border-color: rgba(255, 255, 255, 0.2);
+      color: gray; }
+    popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop, .osd button:backdrop {
+      border-width: 2px;
+      border-style: solid; }
+    popover.background.touch-selection button.flat, popover.background.touch-selection button.sidebar-button, popover.background.magnifier button.flat, popover.background.magnifier button.sidebar-button, .osd button.flat, .osd button.sidebar-button {
+      border-width: 2px;
+      border-style: solid;
+      box-shadow: none;
+      text-shadow: 0 1px black;
+      -gtk-icon-shadow: 0 1px black; }
+      popover.background.touch-selection button.flat:hover, popover.background.touch-selection button.sidebar-button:hover, popover.background.magnifier button.flat:hover, popover.background.magnifier button.sidebar-button:hover, .osd button.flat:hover, .osd button.sidebar-button:hover {
+        border-width: 2px;
+        border-style: solid;
+        color: #fff;
+        background-color: rgba(77, 77, 77, 0.8);
+        border-color: rgba(255, 255, 255, 0.2);
+        box-shadow: none; }
+      popover.background.touch-selection button.flat:disabled, popover.background.touch-selection button.sidebar-button:disabled, popover.background.magnifier button.flat:disabled, popover.background.magnifier button.sidebar-button:disabled, .osd button.flat:disabled, .osd button.sidebar-button:disabled {
+        border-width: 2px;
+        border-style: solid;
+        border-color: rgba(255, 255, 255, 0.2);
+        color: gray;
+        background-image: none;
+        border-color: transparent;
+        box-shadow: none; }
+      popover.background.touch-selection button.flat:backdrop, popover.background.touch-selection button.sidebar-button:backdrop, popover.background.magnifier button.flat:backdrop, popover.background.magnifier button.sidebar-button:backdrop, .osd button.flat:backdrop, .osd button.sidebar-button:backdrop {
+        border-width: 2px;
+        border-style: solid; }
+      popover.background.touch-selection button.flat:active, popover.background.touch-selection button.sidebar-button:active, popover.background.magnifier button.flat:active, popover.background.magnifier button.sidebar-button:active, popover.background.touch-selection button.flat:checked, popover.background.touch-selection button.sidebar-button:checked, popover.background.magnifier button.flat:checked, popover.background.magnifier button.sidebar-button:checked, .osd button.flat:active, .osd button.sidebar-button:active, .osd button.flat:checked, .osd button.sidebar-button:checked {
+        border-width: 2px;
+        border-style: solid;
+        color: rgba(0, 0, 0, 0.8);
+        background-color: #fff;
+        border-color: rgba(255, 255, 255, 0.2);
+        box-shadow: none; }
   button.image-button {
     padding: 8px; }
   button.text-button {
@@ -672,9 +745,13 @@ stacksidebar row.needs-attention > label {
   border-radius: 3px;
   border-style: solid; }
 
-button.flat, button.sidebar-button, button.flat:backdrop, button.sidebar-button:backdrop, button.flat:disabled:backdrop, button.sidebar-button:disabled:backdrop, modelbutton.flat,
-.menuitem.button.flat, modelbutton.flat:backdrop,
-.menuitem.button.flat:backdrop, button:link, button:visited, button:link:hover, button:link:active, button:visited:hover, button:visited:active, button:link:backdrop, button:visited:backdrop, notebook tab button, row.activatable,
+button.flat, button.sidebar-button, button.flat:backdrop, button.sidebar-button:backdrop, button.flat:disabled:backdrop, button.sidebar-button:disabled:backdrop, modelbutton.flat, popover.background checkbutton,
+popover.background radiobutton,
+.menuitem.button.flat, modelbutton.flat:backdrop, popover.background checkbutton:backdrop,
+popover.background radiobutton:backdrop, modelbutton.flat:backdrop:hover, popover.background checkbutton:backdrop:hover,
+popover.background radiobutton:backdrop:hover,
+.menuitem.button.flat:backdrop,
+.menuitem.button.flat:backdrop:hover, button:link, button:visited, button:link:hover, button:link:active, button:visited:hover, button:visited:active, button:link:backdrop, button:visited:backdrop, notebook tab button, row.activatable,
 row.activatable:backdrop,
 row.activatable:backdrop:active,
 row.activatable:backdrop:checked,
@@ -690,22 +767,56 @@ row.activatable:disabled:checked, calendar.button, calendar.button:hover, calend
   -gtk-icon-shadow: none; }
 
 /* menu buttons */
-modelbutton.flat,
+modelbutton.flat, popover.background checkbutton,
+popover.background radiobutton,
 .menuitem.button.flat {
-  outline-offset: -1px; }
-  modelbutton.flat:backdrop,
-  .menuitem.button.flat:backdrop {
-    color: #000; }
-    modelbutton.flat:backdrop:hover,
-    .menuitem.button.flat:backdrop:hover {
-      color: #fff;
-      background-color: #000; }
-  modelbutton.flat:disabled,
-  .menuitem.button.flat:disabled {
-    color: gray; }
+  min-height: 26px;
+  padding-left: 5px;
+  padding-right: 5px;
+  border-radius: 3px;
+  outline-offset: -2px; }
+  modelbutton.flat:hover, popover.background checkbutton:hover,
+  popover.background radiobutton:hover,
+  .menuitem.button.flat:hover {
+    background-color: white; }
+  modelbutton.flat check:last-child, popover.background checkbutton check:last-child,
+  popover.background radiobutton check:last-child,
+  modelbutton.flat radio:last-child,
+  popover.background checkbutton radio:last-child,
+  popover.background radiobutton radio:last-child,
+  .menuitem.button.flat check:last-child,
+  .menuitem.button.flat radio:last-child {
+    margin-left: 8px; }
+  modelbutton.flat check:first-child, popover.background checkbutton check:first-child,
+  popover.background radiobutton check:first-child,
+  modelbutton.flat radio:first-child,
+  popover.background checkbutton radio:first-child,
+  popover.background radiobutton radio:first-child,
+  .menuitem.button.flat check:first-child,
+  .menuitem.button.flat radio:first-child {
+    margin-right: 8px; }
+
+modelbutton.flat arrow, popover.background checkbutton arrow,
+popover.background radiobutton arrow {
+  background: none; }
+  modelbutton.flat arrow:hover, popover.background checkbutton arrow:hover,
+  popover.background radiobutton arrow:hover {
+    background: none; }
+  modelbutton.flat arrow.left, popover.background checkbutton arrow.left,
+  popover.background radiobutton arrow.left {
+    -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
+  modelbutton.flat arrow.right, popover.background checkbutton arrow.right,
+  popover.background radiobutton arrow.right {
+    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
 
 button.color {
   padding: 4px; }
+  button.color colorswatch:only-child {
+    box-shadow: 0 1px _text_shadow_color(); }
+    button.color colorswatch:only-child, button.color colorswatch:only-child overlay {
+      border-radius: 0; }
+    button.color colorswatch:only-child:disabled, button.color colorswatch:only-child:backdrop {
+      box-shadow: none; }
 
 /*********
  * Links *
@@ -1323,71 +1434,46 @@ menuitem check, menuitem radio {
 /***************
  * Popovers   *
  ***************/
-popover {
-  margin: 10px;
+popover.background {
   padding: 2px;
-  border-color: gray;
-  border-width: 1px;
-  border-style: solid;
   border-radius: 5px;
   background-color: #fff;
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); }
-  popover:backdrop {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
+  popover.background, .csd popover.background {
+    border: 1px solid gray; }
+  popover.background:backdrop {
+    background-color: #fff;
     box-shadow: none; }
-  popover > .list, popover > .view, textview popover > text, popover > iconview, popover > toolbar, popover > searchbar {
+  popover.background > list,
+  popover.background > .view,
+  textview popover.background > text,
+  popover.background > iconview,
+  popover.background > toolbar,
+  popover.background > searchbar {
+    border-style: none;
     background-color: transparent; }
-  popover separator, popover placessidebar .view separator, placessidebar .view popover separator, popover placessidebar textview text separator, placessidebar textview text popover separator, popover textview placessidebar text separator, textview placessidebar text popover separator, popover placessidebar iconview separator, placessidebar iconview popover separator,
-  popover placessidebar .view separator:backdrop,
-  placessidebar .view popover separator:backdrop,
-  popover placessidebar textview text separator:backdrop,
-  placessidebar textview text popover separator:backdrop,
-  popover textview placessidebar text separator:backdrop,
-  textview placessidebar text popover separator:backdrop,
-  popover placessidebar iconview separator:backdrop,
-  placessidebar iconview popover separator:backdrop {
-    color: #000;
-    background-color: transparent;
-    border: 0; }
-  popover button.flat, popover button.sidebar-button,
-  popover button.flat:hover,
-  popover button.sidebar-button:hover {
-    color: #000;
-    text-shadow: none;
-    transition: none; }
-  popover.magnifier, popover.osd {
-    background-image: none;
-    background-color: rgba(0, 0, 0, 0.8);
-    border: 1px solid gray;
-    color: #fff; }
-    popover.magnifier button, popover.osd button {
-      color: white;
-      text-shadow: none;
-      border-width: 2px;
-      border-style: solid;
-      color: #fff;
-      background-image: none;
-      background-color: rgba(0, 0, 0, 0.8);
-      border-color: rgba(255, 255, 255, 0.2);
-      box-shadow: none; }
-      popover.magnifier button:hover, popover.osd button:hover {
-        border-width: 2px;
-        border-style: solid;
-        color: #fff;
-        background-color: rgba(77, 77, 77, 0.8);
-        border-color: rgba(255, 255, 255, 0.2);
-        box-shadow: none; }
-      popover.magnifier button:active, popover.osd button:active {
-        border-width: 2px;
-        border-style: solid;
-        color: rgba(0, 0, 0, 0.8);
-        background-color: #fff;
-        border-color: rgba(255, 255, 255, 0.2);
-        box-shadow: none; }
-      popover.magnifier button:disabled, popover.osd button:disabled {
-        border-width: 2px;
-        border-style: solid;
-        border-color: rgba(255, 255, 255, 0.2);
-        color: gray; }
+  popover.background.touch-selection, popover.background.magnifier, .csd popover.background.touch-selection, .csd popover.background.magnifier {
+    border: 1px solid rgba(255, 255, 255, 0.1); }
+  popover.background separator,
+  popover.background placessidebar .view separator:backdrop,
+  placessidebar .view popover.background separator:backdrop,
+  popover.background placessidebar textview text separator:backdrop,
+  placessidebar textview text popover.background separator:backdrop,
+  popover.background textview placessidebar text separator:backdrop,
+  textview placessidebar text popover.background separator:backdrop,
+  popover.background placessidebar iconview separator:backdrop,
+  placessidebar iconview popover.background separator:backdrop {
+    margin: 3px; }
+  popover.background list separator,
+  popover.background list placessidebar .view separator:backdrop,
+  placessidebar .view popover.background list separator:backdrop,
+  popover.background list placessidebar textview text separator:backdrop,
+  placessidebar textview text popover.background list separator:backdrop,
+  popover.background list textview placessidebar text separator:backdrop,
+  textview placessidebar text popover.background list separator:backdrop,
+  popover.background list placessidebar iconview separator:backdrop,
+  placessidebar iconview popover.background list separator:backdrop {
+    margin: 0px; }
 
 /*****************
  * Notebooks and *
@@ -2258,8 +2344,8 @@ textview text selection:hover, flowbox flowboxchild:selected, label selection, l
 entry selection:focus, spinbutton selection
 entry selection:focus, entry selection
 spinbutton selection:focus, spinbutton selection
-spinbutton selection:focus, modelbutton.flat:hover, modelbutton.flat:selected,
-.menuitem.button.flat:hover,
+spinbutton selection:focus, modelbutton.flat:selected, popover.background checkbutton:selected,
+popover.background radiobutton:selected,
 .menuitem.button.flat:selected, treeview.view:selected, row.activatable:selected, .sidebar:selected, placessidebar .view:selected, placessidebar textview text:selected, textview placessidebar text:selected, placessidebar iconview:selected, placessidebar calendar:selected {
   background-color: #000;
   color: #fff;
@@ -2268,8 +2354,8 @@ spinbutton selection:focus, modelbutton.flat:hover, modelbutton.flat:selected,
   entry selection:backdrop:focus, spinbutton selection
   entry selection:backdrop:focus, entry selection
   spinbutton selection:backdrop:focus, spinbutton selection
-  spinbutton selection:backdrop:focus, modelbutton.flat:backdrop:hover, modelbutton.flat:backdrop:selected,
-  .menuitem.button.flat:backdrop:hover,
+  spinbutton selection:backdrop:focus, modelbutton.flat:backdrop:selected, popover.background checkbutton:backdrop:selected,
+  popover.background radiobutton:backdrop:selected,
   .menuitem.button.flat:backdrop:selected, row.activatable:backdrop:selected, .sidebar:backdrop:selected {
     background-color: gray;
     color: #fff; }